<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用原生的AJAX发送请求 GET</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button id="btn">点击发送请求</button>
    <div id="result"></div>

    <script>
        // 获取button元素
        const btn = document.getElementById('btn')
        const result = document.getElementById('result')
        // 绑定事件
        btn.onclick = function(){
            // 创建对象
            const xhr = new XMLHttpRequest()
            // 初始化 设置请求的方法和url
            xhr.open('GET','http://localhost:8000/serve') // 可以在这后面凭拼接参数
            // 发送
            xhr.send()
            // 事件绑定 处理服务器返回的结果
            // readystate 是 xhr对象中的属性，表示状态 0 1 2 3 4
            // 当状态为4的时候，表示服务器已将所有的信息返回回来了
            //  change表示转态的改变
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){ // 表示信息已经全部返回
                    // 判断响应状态码  各个状态码
                    // 2xx 开头的都是成功的
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理结果 行 头 空行 体
                        //   响应行
                        // console.log(xhr.status); //状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders()); // 所有响应头
                        // console.log(xhr.response); // 响应体
                        result.innerHTML = xhr.response
                    }else{

                    }
                
                }
            }

        }
    </script>
</body>
</html>